<template>
  <el-card class="m-demo" shadow="never" :body-style="{ padding: '0' }">
    <div class="mg-5"><slot></slot></div>
    <div ref="content" class="content" :style="{ height }">
      <el-divider class="mg" />
      <div class="mg-5"><slot name="code"></slot></div>
    </div>
    <div :class="{ fix: expand }" style="background-color: white">
      <el-divider class="mg" />
      <div class="mg-5 tc">
        <el-button @click="toggle" :icon="icon" size="small">{{ text }}</el-button>
      </div>
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
const content = ref<HTMLElement>()
const expand = ref(false)
const height = ref('0px')
function toggle() {
  expand.value = !expand.value
  height.value = (expand.value ? content.value?.scrollHeight : 0) + 'px'
}
const icon = computed(() => (expand.value ? 'ArrowUp' : 'ArrowDown'))
const text = computed(() => (expand.value ? '收器' : '展开'))
</script>

<style lang="scss" scoped>
.m-demo {
  .content {
    overflow: hidden;
    transition: height 0.3s;
  }
  .fix {
    position: sticky;
    bottom: 0;
    z-index: 1;
  }
  &.el-card {
    overflow: initial;
  }
}
</style>
